<script lang="jsx" setup>
import { ref } from 'vue';
import { UUID } from 'uuidjs';
import { getPcsInfo, getSetInfo } from '@/service/api/modules/trace/one-code-trace';

const pnlId = ref(null);

function setCurrentPnlId(value) {
  pnlId.value = value;
}

function getData() {
  getPcsData();
  getSetData();
}

const pcsColumn = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'pcsNo',
    dataIndex: 'pcsNo',
    title: 'PCS号',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'equId',
    dataIndex: 'equId',
    title: '机台号',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'unit',
    dataIndex: 'unit',
    title: '片型',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'side',
    dataIndex: 'side',
    title: '面次',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'printResult',
    dataIndex: 'printResult',
    title: '打印结果',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      const obj = {
        1: '打印成功',
        2: '打印失败'
      };
      return obj[record.printResult] || '';
    }
  },
  {
    key: 'updateTime',
    dataIndex: 'updateTime',
    title: '打印时间',
    align: 'center',
    checked: true,
    ellipsis: true
  }
];

const pcsTableData = ref([]);
const pcsTableLoading = ref(false);
function getPcsData(row) {
  console.log('get pcs data', row);
  getPcsInfo({ pnlId: pnlId.value })
    .then(({ data, error }) => {
      if (!error) {
        data.forEach((item, index) => {
          item.tableUuid = UUID.generate();
          item.dataIndex = index + 1;
        });
        pcsTableData.value = data;
      }
    })
    .finally(() => {
      pcsTableLoading.value = false;
    });
}

const setColumn = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'textCodeNo',
    dataIndex: 'textCodeNo',
    title: 'Set号',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'equId',
    dataIndex: 'equId',
    title: '机台号',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'unit',
    dataIndex: 'unit',
    title: '片型',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'side',
    dataIndex: 'side',
    title: '面次',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'printResult',
    dataIndex: 'printResult',
    title: '打印结果',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      const obj = {
        1: '打印成功',
        2: '打印失败'
      };
      return obj[record.printResult] || '';
    }
  },
  {
    key: 'updateTime',
    dataIndex: 'updateTime',
    title: '打印时间',
    align: 'center',
    checked: true,
    ellipsis: true
  }
];

const setTableData = ref([]);
const setTableLoading = ref(false);
function getSetData(row) {
  console.log('get set data', row);

  setTableLoading.value = true;
  getSetInfo({ pnlId: pnlId.value })
    .then(({ data, error }) => {
      if (!error) {
        data.forEach((item, index) => {
          item.tableUuid = UUID.generate();
          item.dataIndex = index + 1;
        });
        setTableData.value = data;
      }
    })
    .finally(() => {
      setTableLoading.value = false;
    });
}

function reset() {
  pcsTableData.value = [];
  setTableData.value = [];
}

defineExpose({
  setCurrentPnlId,
  getData,
  reset
});
</script>

<template>
  <div class="pcs-info h-full w-full">
    <ARow :gutter="16" class="h-full w-full">
      <ACol :span="12" class="h-full">
        <Table
          :column="pcsColumn"
          :show-row-selection="false"
          :data-source="pcsTableData"
          :scroll="{ y: 'auto' }"
          :is-init-get-data="false"
          row-key="tableUuid"
          :is-pagination="false"
          class="h-full"
          :loading="pcsTableLoading"
          :row-height="40"
        >
          <template #title>
            <span class="color-#646cff">PCS信息</span>
          </template>
        </Table>
      </ACol>
      <ACol :span="12" class="h-full">
        <Table
          :column="setColumn"
          :show-row-selection="false"
          :data-source="setTableData"
          :scroll="{ y: 'auto' }"
          :is-init-get-data="false"
          row-key="tableUuid"
          :is-pagination="false"
          class="h-full"
          :loading="setTableLoading"
          :row-height="40"
        >
          <template #title>
            <span class="color-#646cff">SET信息</span>
          </template>
        </Table>
      </ACol>
    </ARow>
  </div>
</template>

<style lang="scss" scoped>
.pcs-info {
  padding-top: 10px;
  :deep(.ant-card) {
    .ant-card-body {
      padding-bottom: 0;
      .surely-table-wrapper {
        .ant-spin-nested-loading {
          .surely-table-column-title {
            color: #646cff;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
